<template>
  <div>
    <el-tooltip trigger="hover" effect="light" placement="bottom">
      <SvgIcon
            class="ml-5px cursor-pointer"
            :name="svgName"
            :color="iconColor"
            :width="size"
            :height="size"
          />
      <template #content>
        <div class="w-200px text-16px text-justify">
          {{ content }}
        </div>
      </template>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  svgName: {
    type: String,
    default: () => 'exclamation',
  },
  content: {
    type: String,
    default: () => '',
  },
  size: {
    type: String,
    default: () => '20px',
  },
  iconColor: {
    type: String,
    default: () => '#fff',
  },
})
</script>

<style scoped></style>
